<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的简历</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/indexx.css">
</head>
<body>
   <div class="section-header">
       <nav class="nav">
           <div class="container">
               <div class="row">
                   <div class="nav-item col-md-2"><a href="#about" data-indexx="1" class="about">关于</a></div>
                   <div class="nav-item col-md-2"><a href="#works" data-indexx="2" class="works">作品</a></div>
                   <div class="nav-item col-md-4 back-home"><a href="#home" data-indexx="0" class="home-a"></a></div>
                   <div class="nav-item col-md-2"><a href="#skill" data-indexx="3" section-name=".skill-section" class="skill">能力</a></div>
                   <div class="nav-item col-md-2"><a href="#contact" data-indexx="4" section-name=".contact-section" class="contact">联系</a></div>
               </div>
           </div>
       </nav>
   </div>
    <div class="home">
        <div class="home-section">
            <p>Hi,我是路国庆</p>
            <p class="welcome">欢迎光临我的社区!</p>
            <p>想了解更多，往下滚动哦 ^o^</p>
      </div>
      <a class="scroll-tip" data-indexx="1"></a>
    </div>
    <div class="wrap about" id="about">
    <div class="about-section">
        <div class="line1">
            <span class = "left-span">
                <img class ="bio-icon bio-icon-1" src="./img/bio-icon-1.png" alt="">
            </span>
            <span class = "right-span">
                <img class ="bio-text" src="./img/bio-text-1.png" alt="">
            </span>
        </div>
            <div class=" line2">
                <span class = "left-span">
                    <img class ="bio-icon bio-icon-2" src="./img/bio-icon-2.png" alt="">
                </span>
                <span class = "right-span">
                    <img class ="bio-text bio-text-2" src="./img/bio-text-2.png" alt="">
                </span>
            </div>
            <div class="line3">
                <span class = "left-span">
                    <img class ="bio-icon bio-icon-3" src="./img/bio-icon-3.png" alt="">
                </span>
                <span class = "right-span">
                    <img class ="bio-text bio-text-3" src="./img/bio-text-3.png" alt="">
                </span>
            </div>  
            <a class="scroll-tip" data-indexx="2"></a>
    </div>
</div>
        <div class="wrap" id="works">
            <div class="works-section">
                <div class="container">
                        <div class="work-demo first">
                            <img src="./img/yizaojia.jpg" alt="">
                            <div class="work-info">
                                <h2>喜欢我的东西就关注我吧!</h2>
                                <p>
                                    <strong>开发时间</strong>:2020年2-13<br/>
                                    <strong>工作详情</strong>:框架设计及前端制作<br/>
                                </p>
                            </div>
                        </div>
                        <div class="work-demo">
                            <img src="./img/91zaojia.jpg" alt="">
                            <div class="work-info">
                                <h2>喜欢我的东西就关注我吧!</h2>
                                <p>
                                    <strong>开发时间</strong>:2020年2-13<br/>
                                    <strong>工作详情</strong>:框架设计及前端制作<br/>
                                </p>
                            </div>
                        </div>
                        <div class="work-demo">
                            <img src="./img/wenku.jpg" alt="">
                            <div class="work-info">
                                <h2>喜欢我的东西就关注我吧!</h2>
                                <p>
                                    <strong>开发时间</strong>:2020年2-13<br/>
                                    <strong>工作详情</strong>:框架设计及前端制作<br/>
                                </p>
                            </div>
                        </div>
                        <div class="work-demo first">
                            <img src="./img/shinedeliver.jpg" alt="">
                            <div class="work-info">
                                <h2>喜欢我的东西就关注我吧!</h2>
                                <p>
                                    <strong>开发时间</strong>:2020年2-13<br/>
                                    <strong>工作详情</strong>:框架设计及前端制作<br/>
                                </p>
                            </div>
                        </div>
                        <div class="work-demo">
                            <img src="./img/wxshop.jpg" alt="">
                            <div class="work-info">
                                <h2>喜欢我的东西就关注我吧!</h2>
                                <p>
                                    <strong>开发时间</strong>:2020年2-13<br/>
                                    <strong>工作详情</strong>:框架设计及前端制作<br/>
                                </p>
                            </div>
                        </div>
                    </div>
                    <a class="more-link" href="/">查看更多</a>
                </div>
                <a class="scroll-tip" data-indexx="3" next-name="skill-section"></a>
            </div>
        <div class="wrap" id="skill">
            <div class="skill-section">
                <h1>相关技能</h1>
                <ul>
                    <li class="fade fade1">熟练掌握语义化的 HTML 和具有兼容性的 CSS 模式，熟练手写符合 W3C 标准的结构。</li>
                    <li class="fade fade3">对 可用性、可访问性、前端性能优化、最优实践 等有一定的了解和实践。</li>
                    <li class="fade fade2">对 HTML5 和 CSS3 有一定了解。</li>
                    <li class="fade fade4">熟练掌握 ST2 、Emmet、Sass 等等前端开发和团队协作工具。</li>
                    <li class="fade fade4">熟练掌握 jQuery，实现日常需要的交互效果。</li>
                    <li class="fade fade3">熟悉EXTJS，Nodejs，MySQl，有一定 PHP 后端相关知识。</li>
                    <li class="fade fade2">了解 Ajax 工作原理和实现方法。</li>
                    <li class="fade fade2">对前端canvas，svg有一定了解。</li>
                    <li class="fade fade1">了解手机前端开发jquerymobile，zeptojs及angularjs等。</li>
                    <li class="fade fade4">服务器使用阿里云ECS，对 Linux 有一定了解。</li>
                    <li class="fade fade2">喜欢接触新事物，有一定的自学能力。</li>
                </ul>
            </div>
            <a class="scroll-tip" data-indexx="4"></a>
        </div>
        <div class="wrap" id="contact">
            <div class="contact-section clearfix">
                <h1>联系本人</h1>
                <div class="left">
                    <div class="contact-ways fade fade1">
                    <h2>社交网络</h2>
                    <ul>
                        <li>邮箱: </li>
                        <li>QQ: </li>
                        <li>知乎: </li>
                        <li>微博: </li>
                        <li>Github: </li>
                    </ul>
                </div>
                <div class="contact-info fade fade2">
                    <p>虽然有社交网络,但是平时上网比较少,很多时候是只看不发不过!你可以关注我哦!</p>
                </div>
                </div>  
                <div class="right fade fade3">
                    <h2>项目外包</h2>
                    <p>如果你有前端相关的需求可以联系我做外包,目前我主要做:</p>
                    <ul>
                        <li>网站布局设计及制作，网站页面制作。</li>
                        <li>根据需求，对网站前端进行修改和优化，或者转响应式处理。</li>
                        <li>企业网站建设及相关功能开发。</li>
                        <li>对于网站建设项目，我也有些同行朋友可以推荐， 也欢迎咨询!</li>
                    </ul>
                    <p><strong>适用浏览器</strong>:360、 FireFox、 Chrome、 Safari、 Opera、 傲游、搜狗、世界之窗。不支持IE8及以下浏览器。</p>
                </div>
            </div>
            <a class="scroll-tip" data-indexx="5"></a>
        </div>
    <script src="./js/jq.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/indexx.js"> </script>
</body>
</html>